Typography

The type throughout the content management system uses Google’s Lato font-family. Various font styles are used throughout the CMS to establish a sense of hierarchy in the content and controls.

The styles below show the main heading and paragraph text styles used throughout the CMS. The micro text style is displayed under the “save changes” and “cancel” button to indicate when a page was last updated.

The warning text is used to indicate issues on a page and it is also found above or below (context-dependant) an input field if there is a problem with the user input.

The link styles are also shown below but their usage is documented in the Buttons & Links chapter.

An important thing to consider is that the typography styles below are the only styles that should be used on the CMS. If you find any additional typography styles that have not been documented here, please let us know by raising it as an issue in the github repo.

  • Page Title
    The quick brown fox jumps over the lazy dog
    Size: 27px Weight: Regular Letter-Spacing: -0.5px Colour: #6A6F75
  • Secondary & Modal Title
    The quick brown fox jumps over the lazy dog
    Size: 18px Weight: SemiBold Letter-Spacing: -0.5px Colour: #6A6F75
  • Paragraph
    The quick brown fox jumps over the lazy dog
    Size: 15px Weight: Regular Letter-Spacing: -0.3px Colour: #6A6F75
  • Micro
    The quick brown fox jumps over the lazy dog
    Size: 11px Weight: Regular Letter-Spacing: 0 Colour: #6A6F75
  • Warning
    The quick brown fox jumps over the lazy dog
    Size: 15px Weight: Regular Letter-Spacing: -0.3px Colour: #D62D29
  • Link
    Edit Permissions
    Size: 15px Weight: Regular Letter-Spacing: 0 Colour: #0570B6
  • Micro Link
    12 Groups
    Size: 13px Weight: Regular Letter-Spacing: -0.3px Colour: #0570B6
  • Label
    Published
    Size: 12px Weight: Bold Letter-Spacing: 0px Transform: Uppercase Colour: #657D98
  • Content Label
    Size: 15px Weight: Semibold Letter-Spacing: -0.4px Colour: #6A6F75
  • Placeholder
    Placeholder
    Size: 15px Weight: Regular Letter-Spacing: -0.3px Colour: #9A9FA5
  • Button Text Dark
    Button Text Dark
    Size: 14px Weight: Bold Letter-Spacing: 0px Colour: #657D98
  • Button Text Light (background for display only)
    Button Text Light
    Size: 14px Weight: Bold Letter-Spacing: 0px Colour: #FFFFFF